<template>
  <span ref="scrollIntoView"></span>
  <div class="item-box" v-if="childModel.showpieceTotal > 0">
    <div class="banner-box" v-if="childModel.value">
      <img
        class="banner-img"
        :src="$filters.getLinkUrl(info.value + '?imageView2/1/w/1440/h/500/format/webp')"
        alt=""
      />
    </div>
    <div class="banner-content" :style="{ paddingTop: store.childModel.value ? '80px' : '160px' }">
      <titles :title="info.text" />

      <!-- <span
        class="banner-content-title"
        :style="{
          fontSize: store.styleInfo.contentSize,
          fontFamily: store.styleInfo.textFamily,
          color: store.styleInfo.fontColor,
        }"
        >{{ info.remarks }}</span
      > -->
      <div
        class="remarks-parent-box banner-content-title"
        :style="{
          fontSize: store.styleInfo.contentSize,
          fontFamily: store.styleInfo.textFamily,
          color: store.styleInfo.fontColor,
        }"
        v-html="getTextHtml(info.remarks)"
        style="width: 980px; margin: auto; padding-top: 50px; padding-bottom: 80px"
      ></div>
    </div>
    <div class="child-content">
      <!-- 展品 -->
      <pageChildItem2 />
    </div>
  </div>
  <div v-else>
    <div style="padding-top: 160px"><titles :title="info.text" /></div>
    <div style="width: 820px; height: 506px; margin: auto" v-if="info.value">
      <img
        style="width: 100%; height: 100%; padding-top: 50px"
        :src="$filters.getLinkUrl(info.value + '?imageView2/1/w/820/h/506/format/webp')"
        alt=""
      />
    </div>
    <div
      class="remarks-parent-box"
      :style="{
        fontSize: store.styleInfo.contentSize,
        fontFamily: store.styleInfo.textFamily,
        color: store.styleInfo.fontColor,
      }"
      v-html="getTextHtml(info.remarks)"
      style="width: 980px; margin: auto; padding-top: 50px; padding-bottom: 80px"
    ></div>
    <!-- <span
        
        style="lineheight: '32px'"
        >{{  }}</span
      > -->
  </div>
  <NavVue @top="top" :flag="true"></NavVue>
</template>

<script setup lang="ts">
// @ts-nocheck
import { getTextHtml } from '@/utils/minxin';
import templateText from '@/components/templateText/templateText.vue';
import { urls } from '@/utils/request/upload';
import { ref, watch, computed, reactive, onMounted } from 'vue';
import titles from '@/components/title/title.vue';
import { moduleShowpieces } from '@/api/exhibit/exhibit';
import heardTitle from './heardTitle.vue';
import pageChildItem2 from './components/pageChildItem2.vue';
import { storeToRefs } from 'pinia';
import { useProjectStore } from '@/store';
import NavVue from './components/nav.vue';
const store = useProjectStore();
const scrollIntoView = ref(null);

const { childModel, styleInfo } = storeToRefs(store);


const info = ref({});
const list = ref([]);
const parmas = reactive({
  pageSize: 12,
  pageNo: 1,
  id: 0,
  value: '',
});
info.value = childModel.value;


watch(
  () => styleInfo,
  (value) => {
    const foundElement = styleInfo.value.moduleList.find((item) => item.id === childModel.value.id);
    store.setchildModel(foundElement);
  },
  { immediate: true, deep: true },
);
watch(
  () => childModel,
  (value) => {
    info.value = store.childModel;
  },
  { deep: true },
);
const top = () => {
  scrollIntoView.value.scrollIntoView({ behavior: 'smooth' });
};
// const init = async () => {
//   console.log('8888',info.value.id);

//     parmas.id = info.value.id;
//     console.log('id',parmas.id);

//     let res = await moduleShowpieces(localStorage.getItem('projectId'), parmas);
//     console.log(res.data);
//     list.value = res.data.data;
//     total.value = res.data.total;

// };
// init();
onMounted(() => {
  // var tem1ID = document.getElementById('tem1-heard-item');
  // if (store.childModel.value) {
  //   tem1ID.style.background = 'rgba(0, 0, 0, 0.4)';
  // }

});
</script>

<style lang="less" scoped>
.item-box {
  width: 100%;
}
.banner-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 500px;
}
.banner-img {
  width: 100%;
  height: 500px;
}
.banner-content {
  // position: absolute;
  width: 100%;
  height: 100%;
  background: #faf9f7;
  // bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 160px;
  padding-bottom: 50px;
}
.banner-content-title {
  width: 980px;
  font-weight: 500;
  // color: #ffffff;
  margin-top: 50px;
  font-size: 16px;
  font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
  font-weight: 500;
  color: #333333;
  line-height: 24px;
  text-indent: 2em;
  // display: -webkit-box;
  // -webkit-box-orient: vertical;
  // -webkit-line-clamp: 7; /* 最多显示的行数 */
  // overflow: hidden; /* 隐藏超出部分 */
  // text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.child-content {
  // padding: 0px 230px;
}
// .banner-content {
//   :deep(.title-boxs-item) {
//     color: #ffffff !important;
//   }
//   :deep(.iconfonts) {
//     color: #ffffff !important;
//   }
// }
// .banner-content-title {
//   color: #ffffff !important;
// }
.remarks-parent-box {
  display: flex;
  flex-direction: column;
  :deep(span) {
    margin-bottom: 24px;
  }
  :deep(span:last-of-type) {
    margin-bottom: 0px !important;
  }
}
</style>
